<template>
  <div class="dock-control-panel">
    <!-- title -->
    <div class="dock-control-panel-header fz16 pl5 pr5 flex-align-center flex-row flex-justify-between px-4">
      <span
        >设备控制<span class="fz12 pl15">{{ props.sn }}</span></span
      >
      <span @click="closeControlPanel" class="cursor-pointer">
        <X />
        <!-- <CloseOutlined /> -->
      </span>
    </div>
    <!-- setting -->
    <DeviceSettingBox :sn="props.sn" :deviceInfo="props.deviceInfo"></DeviceSettingBox>
    <!-- cmd -->
    <div class="control-cmd-wrapper">
      <div class="control-cmd-header px-2 py-2 mx-1 mt-1">
        设备远程调试
        <a-switch
          class="debug-btn"
          checked-children="开"
          un-checked-children="关"
          v-model:checked="debugStatus"
          @change="onDeviceStatusChange"
        />
      </div>
      <div class="control-cmd-box">
        <div v-for="(cmdItem, index) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item">
          <div class="control-cmd-item-left flex-1">
            <div class="item-label">{{ cmdItem.label }}</div>
            <div class="item-status">{{ cmdItem.status }}</div>
          </div>
          <div class="h-4/6 border border-gray-600"></div>

          <div class="control-cmd-item-right pl-2 px-3">
            <el-button
              :class="{
                'control-cmd-btn': true,
                'cursor-pointer': debugStatus && !cmdItem.disabled,
                'cursor-not-allowed': !debugStatus || cmdItem.disabled,
                disabled: !debugStatus || cmdItem.disabled,
                loading: cmdItem.loading
              }"
              :disabled="!debugStatus || cmdItem.disabled"
              :loading="cmdItem.loading"
              class="control-cmd-btn"
              @click="sendControlCmd(cmdItem, index)"
            >
              {{ cmdItem.operateText }}
            </el-button>
            <!-- <div
              size="small"
              :class="{
                'control-cmd-btn': true,
                'cursor-pointer': debugStatus && !cmdItem.disabled,
                'cursor-not-allowed': !debugStatus || cmdItem.disabled,
                disabled: !debugStatus || cmdItem.disabled,
                loading: cmdItem.loading
              }"
              class="control-cmd-btn"
              @click="sendControlCmd(cmdItem, index)"
            >
              {{ cmdItem.operateText }}
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { X } from 'lucide-vue-next'
import { CloseOutlined } from '@ant-design/icons-vue'
import { useDockControl } from './use-dock-control'
import { DeviceInfoType, EDockModeCode } from '@/types/device'
import { cmdList as baseCmdList, DeviceCmdItem } from '@/types/device-cmd'
import { useMyStore } from '@/store'
import { updateDeviceCmdInfoByOsd, updateDeviceCmdInfoByExecuteInfo } from '@/utils/device-cmd'
import DeviceSettingBox from './DeviceSettingBox.vue'

const props = defineProps<{
  sn: string
  deviceInfo: DeviceInfoType
}>()

const store = useMyStore()
const initCmdList = baseCmdList.map((cmdItem) => Object.assign({}, cmdItem))
const cmdList = ref(initCmdList)

// 根据机场指令执行状态更新信息
watch(
  () => store.state.devicesCmdExecuteInfo,
  (devicesCmdExecuteInfo) => {
    if (props.sn && devicesCmdExecuteInfo[props.sn]) {
      console.log('devicesCmdExecuteInfo', devicesCmdExecuteInfo[props.sn], cmdList)
      updateDeviceCmdInfoByExecuteInfo(cmdList.value, devicesCmdExecuteInfo[props.sn])
    }
  },
  {
    immediate: true,
    deep: true
  }
)

// 根据设备osd信息更新信息
watch(
  () => props.deviceInfo,
  (value) => {
    updateDeviceCmdInfoByOsd(cmdList.value, value)
    // console.log('deviceInfo', value)
  },
  {
    immediate: true,
    deep: true
  }
)

// dock 控制指令
const debugStatus = ref(props.deviceInfo.dock?.basic_osd?.mode_code === EDockModeCode.Remote_Debugging)
const emit = defineEmits(['close-control-panel'])

function closeControlPanel() {
  emit('close-control-panel', props.sn, debugStatus.value)
}

async function onDeviceStatusChange(status: boolean) {
  let result = false
  if (status) {
    result = await dockDebugOnOff(props.sn, true)
  } else {
    result = await dockDebugOnOff(props.sn, false)
  }
  if (!result) {
    if (status) {
      debugStatus.value = false
    } else {
      debugStatus.value = true
    }
  }
}

const { sendDockControlCmd, dockDebugOnOff } = useDockControl()

async function sendControlCmd(cmdItem: DeviceCmdItem, index: number) {
  const success = await sendDockControlCmd(
    {
      sn: props.sn,
      cmd: cmdItem.cmdKey,
      action: cmdItem.action
    },
    true
  )
  if (success) {
    // updateDeviceSingleCmdInfo(cmdList.value[index])
  }
}
</script>

<style lang="scss" scoped>
.dock-control-panel {
  position: absolute;
  left: calc(100% + 10px);
  top: 0px;
  width: 418px;
  padding: 0 !important;
  background: rgba(48, 48, 48, 0.95);
  color: #fff;
  border-radius: 2px;
  .dock-control-panel-header {
    border-bottom: 1px solid #515151;
    height: 42px;
    background: rgba(0, 0, 1, 0.4);
    border-radius: 2px 2px 0px 0px;
  }

  .control-cmd-wrapper {
    .control-cmd-header {
      font-size: 14px;
      font-weight: 600;
      padding: 10px 10px 0px;
      height: 42px;
      background: rgba(0, 0, 1, 0.4);
      .debug-btn {
        margin-left: 10px;
        border: 1px solid #585858;
      }
    }

    .control-cmd-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 4px 4px;
      .control-cmd-item {
        width: 200px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 6px 0;
        padding: 0 8px;
        background-color: rgba(0, 0, 1, 0.4);
        .control-cmd-item-left {
          display: flex;
          flex-direction: column;

          .item-label {
            opacity: 0.85;
            font-weight: 700;
          }
          .item-status {
            opacity: 0.6;
            font-weight: 700;
          }
        }
        .control-cmd-item-right {
          .control-cmd-btn {
            // padding: 0;
            // width: vw(58);
            // height: vh(34);
            text-align: center;
            // line-height: 26px;
            // opacity: 0.65;
            // background-image: url('@/assets/icons/button-bg.svg');
            // background-size: auto 100%;
            // background-repeat: no-repeat;
            // background-position: center;
          }
        }
      }
    }
  }
}
// .control-cmd-btn.disabled {
//   cursor: not-allowed;
//   opacity: 0.5;
// }

// .control-cmd-btn.loading {
//   cursor: wait;
// }

// .control-cmd-btn.cursor-pointer {
//   background-image: url('@/assets/icons/button-bg.svg') !important;
// }

// .control-cmd-btn.cursor-not-allowed {
//   background-image: url('@/assets/icons/button-bg-disabled.svg') !important;
// }
:deep(.ant-btn) {
  color: #fff;
  background: none;
  &:hover {
    background-color: none !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
}
:deep(.ant-btn[disabled]) {
  background: none;
  color: #fff;
  opacity: 0.3;
}
</style>
